import React, { useState, useEffect } from "react";
import { getHotTagList, getSearchInfoList } from "network/Home";

import debounce from "lodash/debounce";
import { Drawer, Input } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import "./index.less";

function index() {
    const [visible, setVisible] = useState(false);
    const [hotTagList, setHotTagList] = useState([]);
    const [suggestionList, setSuggestionList] = useState([]); // 搜索结果

    function Searchbox() {
        const searchInfo = suggestionList.map((item, index) => {
            return <li key={index}>{item}</li>;
        });

        return (
            <div className="search-box-container">
                <Input placeholder="请输入搜索关键字" prefix={<SearchOutlined />} onChange={handleChange} />
                {suggestionList ? <ul>{searchInfo}</ul> : ""}
                <button className="cancle-button" onClick={() => setVisible(false)}>
                    取消
                </button>
            </div>
        );
    }

    // 热门搜索列表
    const hotItem = hotTagList.map((item) => {
        return (
            <button key={item.code} className="hot-tag">
                {item.name}
            </button>
        );
    });

    // 搜索框内容输入改变
    const handleChange = async (ev) => {
        const senAjax = debounce(
            await getSearchInfoList({
                channelId: "C06022632001",
                isWholeSale: 0,
                key: ev.target.value,
            }),
            3000
        );

        console.log(senAjax);
        setSuggestionList(suggestionList);
    };

    useEffect(async () => {
        const {
            data: { keywords },
        } = await getHotTagList({
            channelId: null,
            isWholeSale: 0,
        });
        setHotTagList(keywords);
    }, []);

    return (
        <div className="search-panel-container">
            <i className="iconfont icon-sousuo"></i>
            <input type="text" placeholder="虫虫乐园" onClick={() => setVisible(true)} />
            <Drawer
                title={<Searchbox />}
                placement="top"
                closable={false}
                onClose={() => setVisible(false)}
                visible={visible}
                height={"100vh"}
            >
                {hotItem}
            </Drawer>
        </div>
    );
}

export default index;
